<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
 <style>
        .video-js{
            width:100%;
            height: 150px;
            position: relative;
           
        }
       video{
       /*	transform: rotate(90deg);*/
       }
       .VideoFullScreen {
       	float:left;
	cursor:pointer;
	position: absolute;
	bottom: 27px;
	right: 23px;
	width: 36px;
	height: 36px;
	/*background:url(images/giant/fullscreen-off.png) 0 0 no-repeat;*/
	background:black;
       }
    
    .ui-bar-f{
			 color: white;
    		background-color: #8968CD;
		}	
	.ui-body-f {
    
	    color: white;
	    background-color: rbga(0,0,0,.5);
}  
    </style>
	</head>
	<body>
<div data-role="header" data-theme="f">
  	
    <h1>笛子入门</h1>
    <a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
  </div>
  
<div data-role="main" class="ui-content">
	 
  	 <video id="my-video" class="video-js vjs-default-skin vjs-button" data-setup='{ "controls": true, "autoplay": false, "preload": "none", "poster": "img/fire.png"}'  >
   		<source src="1.mp4" type="video/mp4">
  		
  	
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  
  <!--评论-->
 	 <div class="ds-thread"></div>
   
  </div>
  
  
  <div data-role="footer" data-position="fixed" data-theme="f">
  	<h1>灵乐乐器在线学习平台</h1>
  </div>
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"not"};
    
  </script>
  <script src="js/embed.js"></script>
   <script>
   	
/*
        (function($){
            var list = [
                {name:"mov_bbb", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", lastTime:0},
                {name:"shichang", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", lastTime:0},
            ];

            var resetVideoSize = function(myPlayer){
                var videoJsBoxWidth = $(".video-js").width();
                var ratio = 1440/900;
                var videoJsBoxHeight = videoJsBoxWidth/ratio;
                myPlayer.height(videoJsBoxHeight);
            }
            var myPlayer = videojs("my-video").ready(function(){
                var i = 0;
                var videoObj = list[i];
                var lastTime = localStorage.getItem(videoObj.name + ".currentTime") || 0;
                this.currentTime(lastTime);

                this.width("100%");
                resetVideoSize(myPlayer);

                //绑定视频播放结束事件
                this.on("ended", function(){
                    if(i >= list.length - 1){
                      i = 0;
                      this.pause();
                      return;
                    }
                    i++;
                    this.src({type: "video/mp4", src: videoObj.url});
                    localStorage.setItem(videoObj.name+".currentTime", 0);
                    this.play();
                });
                
                //绑定视频播放中事件
                this.on("timeupdate", function(data){ 
                    if(this.currentTime() - lastTime > 2){
                        lastTime = this.currentTime();
                        localStorage.setItem(videoObj.name+".currentTime", lastTime);
                    }
                })
                this.play();
            });
            $(window).on("resize", function(){
                resetVideoSize(myPlayer); 
            });

        })(jQuery)
        */
    </script>
   
	</body>
</html>
